<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" isErrorPage="true" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>系统提示</title>

    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/message.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-offset-4 col-lg-4">
            <!--
            INFO  glyphicon glyphicon-ok-sign
            WARN glyphicon glyphicon-info-sign
            ERROR glyphicon glyphicon-remove-sign
            LOAD glyphicon glyphicon-refresh
            -->
            <c:choose>
                <c:when test="${requestScope.MESSAGE.type.type eq 2}">
                    <span class="title">
                        <i class="glyphicon glyphicon-info-sign warn"></i>
                        ${requestScope.MESSAGE.title}
                    </span>
                </c:when>
                <c:when test="${requestScope.MESSAGE.type.type eq 3}">
                    <span class="title">
                        <i class="glyphicon glyphicon-remove-sign error"></i>
                        ${requestScope.MESSAGE.title}
                    </span>
                </c:when>
                <c:when test="${requestScope.MESSAGE.type.type eq 4}">
                    <span class="title">
                        <i class="glyphicon glyphicon-refresh load"></i>
                        ${requestScope.MESSAGE.title}
                    </span>
                </c:when>
                <c:otherwise>
                    <span class="title">
                        <i class="glyphicon glyphicon-ok-sign info"></i>
                        ${requestScope.MESSAGE.title}
                    </span>
                </c:otherwise>
            </c:choose>
        </div>
    </div>
    <div class="row">
        <div class="content ${requestScope.MESSAGE.type.type eq 1 ? 'info'  : (requestScope.MESSAGE.type.type eq 2 ? 'warn' : (requestScope.MESSAGE.type.type eq 3 ? 'error' : 'load' ))}">
            ${requestScope.MESSAGE.content}
        </div>
    </div>
    <div id="forward" class="row" time="${requestScope.MESSAGE.time}" url="${requestScope.MESSAGE.targetUrl}">
           <span>
               页面将在
               <span>
                   ${requestScope.MESSAGE.time}
               </span>
               S后跳转到请求地址
           </span>
    </div>
</div>

</body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="jQuery/jquery-3.5.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<!--<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>-->
<script src="js/message.js"></script>
<script>
	$(function () {
		let forward = $('#forward');
		console.log('target:',forward.attr('url'))
		// 跳转循环执行函数
		let timer = setInterval(function () {
			// 新时间复赋值
			forward.attr('time', (forward.attr('time') - 0.1).toFixed(1));
			// 显示新的时间
			$('#forward > span > span').text(parseFloat(forward.attr('time')).toFixed(2));
			// 判断时间是不是符合条件了
			if (forward.attr('time') <= 0) {
				clearInterval(timer);
				location.href = forward.attr('url');
			}
		}, 100);
	})
</script>
</html>

